import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Modal, WingBlank } from 'antd-mobile'
import css from './index.module.scss'
export default class Popup extends PureComponent {
    static propTypes = {
        onClose: PropTypes.func,
        onClosed: PropTypes.func
    }

    state = {
        visible: false
    }

    handleClose = () => {
        this.hide()
        typeof this.props.onClose === 'function' && this.props.onClose() 
    }

    handleClosed = () => {
        typeof this.props.onClosed === 'function' && this.props.onClosed() 
    }

    show = () => {
        this.setState({
            visible: true
        })
    }

    hide = () => {
        this.setState({
            visible: false
        })
    }

    render() {
        const { visible } = this.state
        const { className, title } = this.props
        return (
            <Modal
                className={`${css['modal']} ${className || ''}`}
                popup
                closable
                title={title}
                visible={visible}
                onClose={this.handleClose}
                animationType="slide-up"
                afterClose={this.handleClosed}
            >
                <WingBlank size="md">{this.props.children}</WingBlank>
            </Modal>
        )
    }
}
